<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>取消请求</h1>
  <input type="text" id="ipt">
  <button id="btn">提交</button>
  <button id="cancel">取消请求</button>

  <script>
    // 创建一个axios实例，并且全局配置
    const myAxios = axios.create({
        baseURL:'/',//配置全局路径 跨域的话可能出现不同服务器请求，所以地址不固定
        timeout:10000,// 配置超时状态
        headers:{}
    })

    //获取元素绑定事件
    const oBtn = document.querySelector('#btn')
    const oCancel = document.querySelector('#cancel')
    const oIpt = document.querySelector('#ipt')
    
    // 创建一个取消请求的对象（是一个构造函数）
    const CancelToken  = axios.CancelToken;
    //因为要调用请求数据里面的canceltoken的函数，
    //可以在外面声明一个变量，等于null
    //因为后面要改变值，所以let
    let cancel  = null;

    //axios请求数据
    oBtn.onclick =async function(){
        //获取用户输入的信息
        const IptUserData = oIpt.value;
        try{
            const re =  await myAxios.get('/userTime',{
            params:{
                userId:IptUserData
            },
        // 如果用户请求数据后其他操作，可以中断请求
        //在配置对象中配置一个cancelToken的配置项，值是实例化的CancelToken对象
        cancelToken: new CancelToken((x)=>{
            //当请求发送的时候，这个回调函数会执行
            //并接收一个参数（这个函数就是取消当前请求的函数）
            console.log(x);
            //想让外面调用这个函数，需要让之前声明的变量等于这里的参数x
            cancel = x;
        })
        })
        console.log(re.data,'re');
        //如果上面的请求中断，则会给e处理这个异常
        }catch(e){
            console.log(e.message,'请求异常');
        }
     
    }

    //因为取消函数需要因为其他事件调用，所以需要在其他事件上调用
    oCancel.onclick  = function(){
        cancel();
    }

  </script>
</body>
</html>